document.addEventListener('DOMContentLoaded', function() {
    // 加载动画
    setTimeout(function() {
        document.querySelector('.loader-container').style.opacity = '0';
        setTimeout(function() {
            document.querySelector('.loader-container').style.display = 'none';
        }, 500);
    }, 2000);
    
    // 头部滚动效果
    const header = document.querySelector('.main-header');
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });
    
    // 创建大型水墨动画效果
    createInkAnimationLarge();
    createInkAnimationMedium();
    
    // 导航菜单高亮
    const navLinks = document.querySelectorAll('.main-nav a');
    navLinks.forEach(link => {
        link.addEventListener('click', function() {
            navLinks.forEach(item => item.classList.remove('active'));
            this.classList.add('active');
        });
    });
    
    // 滚动动画效果
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('show');
                observer.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.1
    });
    
    const fadeElements = document.querySelectorAll('.principle-item, .approach-item, .significance-point');
    fadeElements.forEach(element => {
        element.style.opacity = '0';
        element.style.transform = 'translateY(20px)';
        element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(element);
    });
    
    // 创建大型水墨动画效果
    function createInkAnimationLarge() {
        const inkAnimation = document.querySelector('.ink-animation-large');
        if (!inkAnimation) return;
        
        // 创建多个水墨滴
        for (let i = 0; i < 30; i++) {
            createInkDropLarge(inkAnimation);
        }
    }
    
    function createInkDropLarge(container) {
        const drop = document.createElement('div');
        drop.classList.add('ink-drop-large');
        
        // 随机大小和位置
        const size = Math.random() * 100 + 50;
        const posX = Math.random() * 100;
        const posY = Math.random() * 100;
        
        // 随机透明度
        const opacity = Math.random() * 0.3 + 0.1;
        
        drop.style.width = `${size}px`;
        drop.style.height = `${size}px`;
        drop.style.left = `${posX}%`;
        drop.style.top = `${posY}%`;
        drop.style.opacity = opacity;
        
        // 随机颜色
        const r = Math.floor(Math.random() * 50);
        const g = Math.floor(Math.random() * 50);
        const b = Math.floor(Math.random() * 50);
        drop.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${opacity})`;
        
        container.appendChild(drop);
    }
    
    // 创建中型水墨动画效果
    function createInkAnimationMedium() {
        const inkAnimation = document.querySelector('.ink-animation-medium');
        if (!inkAnimation) return;
        
        // 创建多个水墨滴
        for (let i = 0; i < 20; i++) {
            createInkDropMedium(inkAnimation);
        }
    }
    
    function createInkDropMedium(container) {
        const drop = document.createElement('div');
        drop.classList.add('ink-drop-medium');
        
        // 随机大小和位置
        const size = Math.random() * 70 + 30;
        const posX = Math.random() * 100;
        const posY = Math.random() * 100;
        
        // 随机透明度
        const opacity = Math.random() * 0.3 + 0.1;
        
        drop.style.width = `${size}px`;
        drop.style.height = `${size}px`;
        drop.style.left = `${posX}%`;
        drop.style.top = `${posY}%`;
        drop.style.opacity = opacity;
        
        // 随机颜色
        const r = Math.floor(Math.random() * 50);
        const g = Math.floor(Math.random() * 50);
        const b = Math.floor(Math.random() * 50);
        drop.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${opacity})`;
        
        container.appendChild(drop);
    }
});